<%--
  Created by IntelliJ IDEA.
  User: gsb
  Date: 2019/11/22
  Time: 17:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>试卷管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/common.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>

    <script src="/lims/layui/layui.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lims/js/common.js?v=20190726" type="text/javascript" charset="utf-8"></script>
    <script src="/lims/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lims/layui/global.js"></script>
    <style>
        .layui-form-label{width:100px;}
        .layui-input-block{margin-left:130px;}
        .layui-disabled, .layui-disabled:hover{color: #797979 !important;}
    </style>
    <link rel="stylesheet" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.all.min.js"></script>
    <%--    <link rel="stylesheet" href="/duplopages/manage/standard/form/css/treeselect.css"/>--%>
    <script type="text/javascript" src="/lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js/"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div class="layui-fluid" id="LAY-app-message">
    <input type="hidden" id="testId">
    <div class="layui-row layui-col-space15">
        <div class="layui-lf" style="width:250px;float:left">
            <div class="layui-card">
                <div class="layui-card-body" id="leftHeight" style="height:650px;">
                    <ul id="questionTree" class="ztree" lay-filter="ztree" style="overflow:auto;height:100%"></ul>

                </div>
            </div>
        </div>
        <div class="layui-rt" style="width:calc(100% - 285px);float:left">
            <div class="layui-card">
                <style>
                    .layui-card-header .layui-icon{
                        top:auto !important;
                    }
                </style>
                <div id="queryarea_searchView"></div>


                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width:320px">
                                <label class="layui-form-label" style="width:80px;">培训中心</label>
                                <div class="layui-input-inline" style="width: 150px;position:relative;">
                                    <input type="text" name="trainCenter" id="trainCenter"   required  lay-verify="required" placeholder="请选择培训中心" autocomplete="off" class="layui-input">
                                    <div class="layui-form-mid layui-word-aux" style="position: absolute;right:0px;right: -85px;top: 1px;"><a href="javascript:;" style="color: #207BD6;padding:0px 10px" id="addDept">添加</a><a href="javascript:;" id="clearDept" style="color: #207BD6;">清除</a></div>
                                </div>
                            </div>
                            <div class="layui-inline" style="">
                                <label class="layui-form-label" style="width:80px;">试卷类型</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <select name="" class="ndType" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="0">固定试卷</option>
                                        <option value="1">随机试卷</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width:320px">
                                <label class="layui-form-label" style="width:80px;">发布状态</label>
                                <div class="layui-input-inline" style="width: 150px;position: relative">
                                    <select name="" class="fabuType" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="0">未发布</option>
                                        <option value="1">已发布</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline" style="">
                                <label class="layui-form-label" style="width:80px;">试卷名称</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input type="text" name="pName" placeholder="请输入试卷名称" autocomplete="off" class="layui-input pName">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn search">搜索</button>
                                <button type="button" class="layui-btn layui-btn-primary reset">全部重置</button>
                            </div>

                        </div>
                    </form>
                    <div id="action_actionView"></div>
                    <table id="questionTable" lay-filter="questionTable-table"></table>
                </div>
            </div>
        </div>
    </div>
    <script id="toolbar" type="text/html" lay-filter="btn">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm add" id="add" lay-event="add">新建</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm del" id="del"  lay-event="del">删除</button>
    </script>
    <script id="barOperation" type="text/html" lay-filter="toolBtn">
        <button type="button" class="layui-btn  layui-btn-xs"  lay-event="preview">预览</button>
        <button type="button" class="layui-btn  layui-btn-xs"  lay-event="fabu">发布</button>
        <button type="button" class="layui-btn  layui-btn-xs"  lay-event="edit">编辑</button>
        <button type="button" class="layui-btn  layui-btn-xs layui-btn-danger "  lay-event="del">删除</button>
    </script>
</div>
</body>
</html>
<script>
    $("#addDept").on("click",function(){
        dept_id = "trainCenter";
        $.popWindow("/common/selectDept");
    });
    $('#clearDept').click(function () {
        $("#trainCenter").val("");
        $("#trainCenter").attr('deptName','');
        $("#trainCenter").attr('deptid','');
    });
    var height = $(window).height()
    $('#leftHeight').height(height-30)
    layui.use(['table','layer','laydate','form','element','eleTree','treeSelect'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var eleTree = layui.eleTree;
        var element = layui.element;
        var treeSelect = layui.treeSelect;
        form.render();

        // //培訓中心下拉樹
        // treeSelect.render({
        //     elem: '#trainCenter',     // 选择器
        //     data: '/exaExamination/selectAllTree?deptId=0',  // 数据
        //     type: 'get',      // 异步加载方式：get/post，默认get
        //     placeholder: '请选择',   // 占位符
        //     search: true,  // 是否开启搜索功能：true/false，默认false
        //     style: {   // 一些可定制的样式
        //         folder: {enable: true},
        //         line: {enable: true}
        //     },
        //     click: function(d){     // 点击回调
        //         $('input[name="trainCenter"]').val(d.current.id);
        //         form.render()
        //     },
        //     // 加载完成后的回调函数
        //     success: function (d) {
        //     }
        // });

        //    获取左侧树
        // 初始化渲染 树形菜单
        var el = eleTree.render({
            elem: '#questionTree',
            showLine:true,
            url:'/examTest/showParent',
            lazy: true,
            load: function(data,callback) {
                $.post(' /examTest/showChild?testId='+data.testId,function (res) {
                    callback(res.data);//点击节点回调
                })
            },
            done:function (data) { //渲染完成回调
                aldata = data.data
            }
            ,highlightCurrent: true,
        });
        // 节点点击事件
        eleTree.on("nodeClick(ztree)",function(d) {
            var obj = d.data.currentData
            parentId=obj.testId;
            $('#testId').val(parentId)

            var currentPage = 1
            table.reload('questionTable',{
                url : '/exaPaper/selectPaper?testId='+parentId,
                data:{page:currentPage},
                page:{
                    curr:currentPage
                }
            })
        });

        //    获取右侧列表
        var tableObj=table.render({
            elem: '#questionTable'
            ,url: '/exaPaper/selectPaper' //数据接口
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['prev', 'page', 'next',  'skip','count','limit',]//自定义分页布局
                ,limits:[5,10,15,20,25,30,35,40,45,50]
                ,limit:5
                ,first: false //不显示首页
                ,last: false //不显示尾页
            } //开启分页
            ,toolbar:'#toolbar'
            ,cols: [[ //表头
                {type: 'checkbox' }
                ,{type: 'pName', title: '试卷名称',width:300,templet:function(d){
                        return d.pName
                    }}
                ,{field: 'countScores', title: '总分'}
                ,{field: 'testFormat', title: '试卷类型',templet:function(d){
                        if(d.testFormat == 0){
                            return '固定试卷'
                        }else if(d.testFormat == 1){
                            return '随机试卷'
                        }
                    }}
                    ,{field:'courseName',title:'所属课程'}
                    ,{field:'courseStageName',title:'所属阶段'}
                ,{field: 'createName', title: '创建人'}
                ,{fixed: 'right',width:260,fixed:'right', title: '操作',align:'center', toolbar: '#barOperation'}
            ]]
            ,limit:10
            ,done:function(res) {
                for(var i=0;i<res.data.length;i++){
                    if(res.data[i].status == 1){
                        $('tr[data-index="'+i+'"]').find('button[lay-event="fabu"]').text('取消发布')
                        $('tr[data-index="'+i+'"]').find('button[lay-event="edit"]').hide()
                    }
                }
            }
        });

        //搜索
        $('.search').click(function(){
            var  currentPage=1;
            table.reload('questionTable',{
                url : '/exaPaper/selectPaper',
                data:{page:currentPage},
                page:{
                    curr:currentPage
                },
                where:{
                    testId:$('#testId').val(),
                    pName:$('.pName').val(),
                    testFormat:$('.ndType').val(),
                    status:$('.fabuType').val(),
                    trainCenter:$('#trainCenter').attr('deptId')
                }
            })
        })
        //重置
        $('.reset').click(function(){
            window.location.reload();
        })

        //监听工具条
        table.on('toolbar(questionTable-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'add'){ //新建
                create(0,$('#testId').val(),'')
            } else if(layEvent === 'del'){ //删除
                var data = table.checkStatus('questionTable').data;
                if(data.length>0){
                    var ids=''
                    for(var i=0;i<data.length;i++){
                        ids+= data[i].pId+','
                    }
                    publicDeletes("/exaPaper/deletePaper",ids,tableObj,table);
                }else{
                    layer.msg('未选中行',{icon:6})
                }

            } else if(layEvent === 'import'){ //编辑

            }
        });
        //监听操作工具条
        table.on('tool(questionTable-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'preview'){ //预览
                var pId = data.pId;
                layer.open({
                    type: 2,
                    title: '预览',
                    shadeClose: true,
                    shade: 0.5,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '90%'],
                    content:'/tbExamList/testPreview?id='+pId,
                });
            } else if(layEvent === 'del'){ //删除
                var pId = data.pId;
                publicDeletes("/exaPaper/deletePaper",pId,tableObj,table);
            } else if(layEvent === 'edit'){ //编辑
                var pId = data.pId;
                create(1,$('#sortId').val(),pId)
            } else if(layEvent === 'fabu'){ //编辑
                var datas= {pId:data.pId}
                if($(this).text() == '发布'){
                    datas.status = 1;
                }else{
                    datas.status = 0;
                }
                $.ajax({
                    url:'/exaPaper/updatePaper',
                    data:datas,
                    dataType:'json',
                    success:function(res){
                        if(res.code == 0){
                            var currentPage = 1
                            table.reload('questionTable',{
                                url : '/exaPaper/selectPaper?testId='+$('#testId').val(),
                                data:{page:currentPage},
                                page:{
                                    curr:currentPage
                                }
                            })
                        }
                    }
                })
            }
        });

        //    新建编辑共有函数
        function create(type,testId,id){
            if(type=='0'){
                var title = '新建'
            }else{
                var title = '编辑'
            }
            layer.open({
                type: 2,
                title: title,
                shadeClose: true,
                shade: 0.5,
                maxmin: true, //开启最大化最小化按钮
                area: ['100%', '100%'],
                content:'/tbExamList/testCreate?id='+id+'&title='+type,
                end:function(){

                },
                cancel:function(index){

                }
            });
        }

        //        删除
        function publicDeletes(url,ids,tableIns,table){
            layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                var data={
                    ids:ids
                }
                var res=toAjaxT(url,data);
                layer.msg(res.msg)
                if(res.code==0){
                    try {
                        if (ids.substring(ids.length - 1) == ",") {
                            ids = ids.substring(0, ids.length - 1);
                        }
                        var dataSize = ids.split(",");
                        var dataAll = table.cache[tableIns.config.id];
                        if (dataAll.length == dataSize.length) {
                            //得到当前页
                            var page = $(".layui-laypage-skip .layui-input").val();

                            if (page > 1) {
                                tableIns.reload({
                                    page: {
                                        curr: page - 1 //重新从第 1 页开始
                                    }}
                                );
                            }else{
                                tableIns=tableIns.reload();
                            }
                        } else {
                            tableIns=tableIns.reload();
                        }
                    } catch (e) {
                        tableIns.reload();
                    }
                }
                layer.close(index);
            });
        }
    })
</script>